<script setup lang="ts">
import { computed, onMounted } from "vue"
import useCover from "../../useCover"
import Content from "../content.vue"
import { modelList } from "../type"

const { cmdForm, imgCurrentIndex, submitLoading, imageList, handleChangeImg, handleSubmit, getImageList } = useCover()
defineProps(["hide"])

onMounted(getImageList)

const shouldDisableButton = computed(() => {
  const { messages, scene, model, name } = cmdForm.value
  return ![messages, scene, model, name].every((value) => value !== "")
})
</script>

<template>
  <div :class="['desc-container', { hide }]">
    <Content>
      <template #title>
        <div class="left">名称</div>
        <!-- <div class="right-flex" @click="handleGenerateRandomValue">
          <el-icon>
            <Refresh />
          </el-icon>
          随机示例
        </div> -->
      </template>
      <div class="textarea">
        <el-input v-model="cmdForm.name" placeholder="请输入名称" />
      </div>
    </Content>
    <Content class="terms">
      <template #title>
        <div class="left">场景类型</div>
      </template>
      <div class="img-info">
        <div
          :class="['img-list', imgCurrentIndex === index ? 'img-active' : '']"
          @click="handleChangeImg(item, index)"
          v-for="(item, index) in imageList"
          :key="index"
        >
          <img :src="item.path" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </Content>
    <Content>
      <template #title>
        <div class="left">模型</div>
      </template>
      <div class="model-flex">
        <el-button
          type="danger"
          :class="['model-btn', item.model === cmdForm.model ? 'active' : '']"
          v-for="item in modelList"
          :key="item.model"
          @click="cmdForm.model = item.model"
        >
          {{ item.name }}
        </el-button>
      </div>
    </Content>
    <Content>
      <template #title>
        <div class="left">描述您的需求</div>
        <!-- <div class="right-flex" @click="handleGenerateRandomValue">
          <el-icon>
            <Refresh />
          </el-icon>
          随机示例
        </div> -->
      </template>
      <div class="textarea">
        <el-input
          :rows="4"
          resize="none"
          v-model="cmdForm.messages"
          type="textarea"
          placeholder="请输入您需要智库解决的问题、清晰的描述您的需求将获得更好的效果!"
        />
      </div>
    </Content>
    <el-button
      type="danger"
      :loading="submitLoading"
      :disabled="shouldDisableButton"
      @click="handleSubmit"
      class="submit-btn margin"
      >开始头脑风暴</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
.desc-container {
  position: absolute;
  width: 300px;
  box-sizing: border-box;
  height: 100%;
  z-index: 99;
  background-color: #fff;
  transition: all 0.3s;
  overflow-y: scroll;
  padding: 8px 16px;
  border-right: 1px solid #e8e8e8;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  &.hide {
    transform: translateX(-100%);
  }
}
.terms {
  position: relative;
  z-index: 10;
}

.model-flex {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 12px 12px;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));

  .model-btn {
    width: 100%;
    height: 40px;
    margin: 0 10px;
    background: var(--v3-body-bg-color);
    color: #999;
    border: unset;

    &.active {
      background: rgba(249, 232, 233) 50%;
      color: var(--el-color-primary);
      font-weight: 700;
    }
  }
}

.margin {
  margin-top: 30px;
}

.right-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--el-color-primary);
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  height: 40px;
  margin-bottom: 40px;
}

.img-info {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center; */
  display: grid;
  align-items: center;
  justify-items: center;
  grid-gap: 12px 12px;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));

  .img-list {
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    /* width: 70px; */
    height: 70px;
    box-sizing: border-box;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
      height: 100%;
      transition: width 0.6s;
      box-sizing: border-box;
    }

    .name {
      width: 100%;
      position: absolute;
      z-index: 9;
      left: 0;
      bottom: 0;
      color: #fff;
      font-size: 10px;
      padding: 3px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(51, 51, 51, 0.6);
      border-radius: 0 0 6px 6px;
      user-select: none;
    }
  }

  .img-active {
    border: 2px solid var(--el-color-primary);
  }
}
</style>
